<template>
  <div class="live">
    <div class="r-top2" :style="style2">
      <div class="r-top-o">公告栏</div>
      <div :style="rTopT2">
        <div class="table-container">
          <table class="custom-table">
            <tr v-for="(item, index) in warnings" :class="index%2==0?'custom-table-tr1':'custom-table-tr2'">
              <td>{{item.eventName}} {{item.eventArea}} {{item.deviceInfo}} {{item.createTime}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="r-top" :style="style">
      <div class="r-top-o">视频监控画面 </div>
      <div class="r-top-t" v-if="dialogVisible">
        <div style="width: 95%;height: 95%;border: 1px solid red;" @dblclick="dialogVisible=!dialogVisible">
          <video controls autoplay="true" preload="metadata" id="recordshow">
            <source :src="src" type="video/mp4">
            您的浏览器不支持HTML5视频播放。
          </video>
        </div>
      </div>
      <div class="r-top-t" v-if="!dialogVisible">
        <!-- 移除父级 el-col 的 click 事件，只保留 img 的点击事件 -->
        <el-row style="height:48%;margin: 5px;" align="middle">
          <el-col :span="12" style="height:100%">
            <img id="c1" src="http://192.168.100.168:5000/v45" style="width: 100%;height: 100%;" @dblclick="openVideo($event)"/>
          </el-col>
          <el-col :span="12" style="height:100%">
            <img id="c2" src="http://192.168.100.168:5001/v63" style="width: 100%;height: 100%;" @dblclick="openVideo($event)"/>
          </el-col>
        </el-row>
        <el-row style="height:48%;margin: 5px;" align="middle">
          <el-col :span="12" style="height:100%">
            <img id="c3" src="http://192.168.100.168:5002/v3" style="width: 100%;height: 100%;" @dblclick="openVideo($event)"/>
          </el-col>
          <el-col :span="12" style="height:100%">
            <img id="c4" src="http://192.168.100.168:5004/v4" style="width: 100%;height: 100%;" @dblclick="openVideo($event)"/>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { checkErrorAction } from "@/common/api";
import Axios from 'axios'

export default {
  name: "live",
  props: {},
  components: {},
  data() {
    return {
      src: 'http://192.168.100.168:7749/system/alertevent/play?files=st20250716175407.mp4',
      warnings:[],
      dialogVisible:false,
      c1: 1,
      c2: 2,
      c3: 3,
      c4: 4,
      c5: 5,
      c6: 6,
      c7: 7,
      c8: 8,
      c9: 9,
      errorNo: 0,
      bgStyle: require("@/assets/bgImg.png"),
      bgStyle2: require("@/assets/round.png"),
      bgStyle3: require("@/assets/liveupbp.png"),
      bgStyle4: require("@/assets/liveupbgcto.png"),
      bgStyle5: require("@/assets/bgtjg.png"),
      bgStyle6: require("@/assets/liveupbp2.png"),
      data: [{}, {}, {}, {}, {}],
      taskData: [],
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null,
      timer5: null,
      timer6: null,
      timer7: null,
      timer8: null,
      timer9: null,
      timer: null,
      eventTime: null,
      eventArea: null,
      eventName: null,
      eventPic: null,
    };
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      };
    },
    style2() {
      return {
        backgroundImage: `url(${this.bgStyle6})`,
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        'margin-bottom': '2px',
      };
    },
    style6() {
      return {
        backgroundSize: "contain",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      };
    },
    rTopT2() {
      return {
        backgroundImage: `url(${this.bgStyle4})`,
        alignItems: 'center',
        height: '70%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: '10px',
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "92% 100%",
      }
    },
    customTable(){
      return {
        width: '100%',
        borderCollapse: 'collapse',
        tableLayout: 'fixed',
        background: 'transparent',
        color: '#e2e8f0',
        fontSize: '14px',
        height:'100%',
        backgroundImage: `url(${this.bgStyle5})`,
      }
    },
  },
  methods: {
    // test () {
    //   this.$router.push({name: 'Video'})
    // },
    stopshow(){
      this.dialogVisible = false 
    },
    changlive9(){
      this.c9 = Number(this.c9) + 4
      if(this.c9>67) this.c9 = 1
      document.getElementById("c9").src = `http://192.168.100.168:5009/v${this.c9}`
    },
    changlive8(){
      this.c8 = Number(this.c8) + 4
      if(this.c8>67) this.c8 = 1
      document.getElementById("c8").src = `http://192.168.100.168:5008/v${this.c8}`
    },
    changlive7(){
      this.c7 = Number(this.c7) + 4
      if(this.c7>67) this.c7 = 1
      document.getElementById("c7").src = `http://192.168.100.168:5007/v${this.c7}`
    },
    changlive6(){
      this.c6 = Number(this.c6) + 4 // 修复原代码 bug：之前用的是 this.c8
      if(this.c6>67) this.c6 = 1
      document.getElementById("c6").src = `http://192.168.100.168:5006/v${this.c6}`
    },
    changlive5(){
      this.c5 = Number(this.c5) + 4
      if(this.c5>67) this.c5 = 1
      document.getElementById("c5").src = `http://192.168.100.168:5005/v${this.c5}`
    },
    changlive4(){
      this.c4 = Number(this.c4) + 4
      if(this.c4>67) this.c4 = 1
      document.getElementById("c4").src = `http://192.168.100.168:5004/v${this.c4}`
    },
    changlive3(){
      this.c3 = Number(this.c3) + 4
      if(this.c3>67) this.c3 = 1
      document.getElementById("c3").src = `http://192.168.100.168:5002/v${this.c3}`
    },
    changlive2(){
      this.c2 = Number(this.c2) + 4
      if(this.c2>67) this.c2 = 1
      document.getElementById("c2").src = `http://192.168.100.168:5001/v${this.c2}`
    },
    changlive1(){
      this.c1 = Number(this.c1) + 4
      if(this.c1>67) this.c1 = 1
      document.getElementById("c1").src = `http://192.168.100.168:5000/v${this.c1}`
    },
    checkRedis(){
      checkErrorAction().then(res=>{
        if(res.message === "change"){
          this.dialogVisible = false
          this.eventTime = res.data.eventTime
          this.eventName = res.data.eventName
          this.eventArea = res.data.eventArea
          this.eventPic = res.data.url
          this.src = `http://192.168.100.168:7749/system/alertevent/play?files=${res.data.video.split('/')[2]}`
          this.dialogVisible = true
          document.getElementById("recordshow").load();
          setTimeout(() => this.stopshow(), 60000);
        }
      })
      Axios.get("http://192.168.100.168:7749/system/alertevent/select4bigscreen")
        .then(res => this.warnings = res.data ? res.data.slice(0, 3) : [])
    },
    startTimer() {
      if (this.timer) return
      this.timer = setInterval(() => this.checkRedis(), 10000)
    },
    startTimer1() {
      if (this.timer1) return
      this.timer1 = setInterval(() => this.changlive1(), 60000)
    },
    startTimer2() {
      if (this.timer2) return
      this.timer2 = setInterval(() => this.changlive2(), 60000)
    },
    startTimer3() {
      if (this.timer3) return
      this.timer3 = setInterval(() => this.changlive3(), 60000)
    },
    startTimer4() {
      if (this.timer4) return
      this.timer4 = setInterval(() => this.changlive4(), 60000)
    },
    startTimer5() {
      if (this.timer5) return
      this.timer5 = setInterval(() => this.changlive5(), 3000000)
    },
    startTimer6() {
      if (this.timer6) return
      this.timer6 = setInterval(() => this.changlive6(), 3000000)
    },
    startTimer7() {
      if (this.timer7) return
      this.timer7 = setInterval(() => this.changlive7(), 3000000)
    },
    startTimer8() {
      if (this.timer8) return // 修复原代码 bug：之前判断的是 this.timer4
      this.timer8 = setInterval(() => this.changlive8(), 3000000)
    },
    startTimer9() {
      if (this.timer9) return
      this.timer9 = setInterval(() => this.changlive9(), 3000000)
    },

    // 获取点击的 img 元素的 src
    openVideo(event) {

      // 阻止事件冒泡（避免父级事件干扰）
      event.stopPropagation();
      const that = this
      
      // 获取当前点击的 img 元素
      const target = event.target;
      
      // 验证是否是 img 元素
      if (target.tagName === 'IMG') {
        const imgSrc = target.src; // 获取 src 地址
        const cameraId = target.id; // 获取摄像头 ID（c1/c2/c3/c4）
        
        // 输出日志（可根据需求修改逻辑，比如赋值给 src 播放视频）
        console.log(`点击的摄像头 ID: ${cameraId}`);
        console.log(`视频流地址: ${imgSrc}`);
        sessionStorage.setItem('videoSrc', imgSrc)
        this.clearTimer ()
        // setTimeout(() => {
          this.$router.push({name: 'Video'})
        // }, 300);
        
        
        
        // 可选：点击后直接播放该摄像头的视频（替换当前的 src）
        // this.src = imgSrc;
        // this.dialogVisible = true;
      }
    },
    
    clearTimer() {
      // 优化定时器清除逻辑（原代码逻辑有误）
      [this.timer, this.timer1, this.timer2, this.timer3, this.timer4, 
       this.timer5, this.timer6, this.timer7, this.timer8, this.timer9].forEach(timer => {
        if (timer) clearInterval(timer);
      });
      // 重置定时器变量
      this.timer = this.timer1 = this.timer2 = this.timer3 = this.timer4 = 
      this.timer5 = this.timer6 = this.timer7 = this.timer8 = this.timer9 = null;
    },
  },
  created() {
    sessionStorage.setItem('videoSrc', "")
    this.clearTimer();
    this.startTimer();
    this.startTimer1();
    this.startTimer2();
    this.startTimer3();
    this.startTimer4();
    // this.startTimer5();
    // this.startTimer6();
    // this.startTimer7();
    // this.startTimer8();
    // this.startTimer9();
  },
  mounted () {
  },
  beforeDestroy() {
    // 组件销毁时清除定时器（防止内存泄漏）
    this.clearTimer();
  }
};
</script>

<style lang="scss" scoped>
.live {
  width: calc(25vw - 30px);
  padding: 0px 20px 10px 10px;
  height: calc(50vh - 6vh - 9px);
  display: flex;
  flex-direction: column;

  .top {
    width: 100%;
    height: 112px;
    display: flex;
    justify-content: space-between;

    .side {
      width: 120%;
      height: 120%;
    }

    .mid {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      gap: 20px;

      .box {
        width: 12%;
        gap: 1%;
        height: 136%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
      }
    }
  }

  .mid-o {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .r-top2 {
    width: 110%;
    height: 38%;
    display: flex;
    flex-direction: column;

    .r-top-o {
      text-align: center;
      height: 10%;
      color: #00fff4;
      font-size: 10px;
    }

    .r-top-t {
      margin-top: 10px;
      align-items: center;
      height: 100%;
    }

    .r-top-t2 {
      align-items: center;
      height: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }

    .r-top-table {
      flex: 1;
      overflow-y: auto;

      .table {
        font-size: 8px;
        color: white;
        border-collapse: collapse;

        .t-head {
          color: #5bccf2;
        }

        tr td {
          text-align: center;
          height: 15px;
        }
      }
    }
  }

  .r-top {
    width: 110%;
    height: 100%;
    flex-direction: column;

    .r-top-o {
      text-align: center;
      height: 10%;
      color: #00fff4;
      font-size: 10px;
    }

    .r-top-t {
      align-items: center;
      height: 85%;
    }

    .r-top-t2 {
      margin-top: 10px;
      align-items: center;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .r-top-table {
      flex: 1;
      overflow-y: auto;

      .table {
        font-size: 8px;
        color: white;
        border-collapse: collapse;

        .t-head {
          color: #5bccf2;
        }

        tr td {
          text-align: center;
          height: 15px;
        }
      }
    }
  }

  .r-bottom {
    width: 100%;
    height: 48%;
    margin-top: 2vh;
  }

  thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #0b38aa;
    color: #00fff4;
    height: 15px;
  }

  .r-top-table::-webkit-scrollbar {
    display: none;
  }

  .r-top-table {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.table tbody tr:nth-child(even) {
  background-color: #092988;
}

.table tbody tr:nth-child(odd) {
  background-color: #082176;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  padding: 0 20px;
}

.video-item {
  position: relative;
  background: rgba(0, 30, 60, 0.8);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video_main {
}

.video-container {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

video {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #0c1829 0%, #1a365d 50%, #2d4a70 100%);
  font-family: 'Microsoft YaHei', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.app-container {
  padding: 20px;
  min-height: 100vh;
}

.main-panel {
  background: linear-gradient(145deg, rgba(30, 58, 138, 0.3), rgba(59, 130, 246, 0.1));
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 15px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-title {
  text-align: center;
  position: relative;
  height: 15%;
}

.title-text {
  display: inline-block;
  background: linear-gradient(45deg, #60a5fa, #3b82f6, #1d4ed8);
  border: 2px solid #3b82f6;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 
    0 4px 15px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.title-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.controls-section {
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(59, 130, 246, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-text {
  color: #60a5fa;
  font-weight: 500;
  font-size: 14px;
}

.table-container {
  height:100%;
  flex-direction: column;
  overflow: hidden;
  width: 90%;
}

.custom-table {
  width:100%;
}

.custom-table thead {
  background: transparent;
}

.custom-table th {
  color: #63dcfb;
  font-size: 10px;
  background-color:rgba(14,92,255,0.8);
}

.custom-table-tr1 {
  color: #ffffff;
  font-size: 8px;
  background-color:rgba(14,92,255,0.2);
  text-align: center;
}

.custom-table-tr2 {
  color: #ffffff;
  font-size: 8px;
  background-color:rgba(14,92,255,0.3);
  text-align: center;
}
</style>